<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>书籍管理</el-breadcrumb-item>
      <el-breadcrumb-item>录入新书</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="formInline" class="user-search">
      <el-form-item label="标题：">
        <el-input size="small" v-model="formInline.Title" placeholder="请输入标题" />
      </el-form-item>
      <el-form-item label="作者名称："><el-input size="small" v-model="formInline.deptName"
          placeholder="请输入作者名称" /></el-form-item>
      <el-form-item label="出版社："><el-input size="small" v-model="formInline.deptNo"
          placeholder="请输入出版社" /></el-form-item>
      <el-form-item label="出版时间：">
        <el-date-picker v-model="timer" align="right" end-placeholder="结束日期" format="yyyy-MM-dd" range-separator="至"
          start-placeholder="开始日期" type="datetimerange" value-format="yyyy-MM-dd" />
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" @click="search">搜索</el-button>
        <el-button size="small" type="warning" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <el-button type="primary" class="add" @click="AddClick">新 增</el-button>
    <!--列表-->
    <el-table :data="listData" border style="width: 100%">
      <el-table-column prop="Code" label="图书ID" />
      <el-table-column prop="Title" label="标题" />
      <el-table-column prop="Auther" label="作者名称" />
      <el-table-column prop="Publisher" label="出版社" />
      <el-table-column prop="PublishDay" label="出版时间" />
      <el-table-column prop="Language" label="出版语言" />
      <el-table-column prop="Remark" label="摘要" />
      <el-table-column prop="Category" label="图书分类号" />
      <el-table-column align="center" fixed="right" label="操作" prop="rateValue">
        <template #default="scope">
          <el-button type="text" @click="editClick(scope.row)">编辑</el-button>
          <el-button type="text" @click="deleteClick(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
    <!-- 编辑界面 -->
    <el-dialog :title="addType ? '新增' : '编辑'" :visible.sync="editDialog" destroy-on-close>
      <el-form ref="editForm" :model="editForm" label-width="120px" max-height="70vh"
        style="height:60vh;overflow: hidden;" :rules="rules">
        <div style="height: 55vh; overflow-y: auto;">
          <el-form-item label="图书ID：" v-if="!addType">
            <el-input disabled="" v-model="editForm.Code"></el-input>
          </el-form-item>
          <el-form-item label="标题：" prop="Title">
            <el-input v-model="editForm.Title" placeholder="请输入标题" maxlength="6"></el-input>
          </el-form-item>
          <el-form-item label="作者名称：">
            <el-input v-model="editForm.Auther" placeholder="请输入作者名称"></el-input>
          </el-form-item>
          <el-form-item label="出版社：">
            <el-input v-model="editForm.Publisher" placeholder="请输入出版社"></el-input>
          </el-form-item>
          <el-form-item label="出版时间：">
            <el-date-picker v-model="editForm.PublishDay" type="date" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="出版语言：">
            <el-select v-model="editForm.Languageid" placeholder="请选择出版语言">
              <el-option v-for="item in LanguageOptions" :key="item.id" :label="item.name" :value="item.id">
                {{ item.name }}
              </el-option>
            </el-select>
          </el-form-item>
          <!-- 用于显示生成的图片 -->
          <el-form-item label="书：" v-if="!addType">
            <el-image :src="imageUrl" />
          </el-form-item>
          <el-form-item label="摘要：">
            <el-input type="textarea" placeholder="请输入摘要" :rows="2" v-model="editForm.Remark"></el-input>
          </el-form-item>
          <el-form-item label="图书分类号：">
            <el-select v-model="editForm.Categoryid" placeholder="请选择出版语言">
              <el-option v-for="item in CategoryOptions" :key="item.id" :label="item.name" :value="item.id">
                {{ item.name }}
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="EdithandleNo('editForm')">取 消</el-button>
            <el-button type="primary" @click="EdithandleOk('editForm')">确 定</el-button>
          </el-form-item>
        </div>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
// import { deptList, deptSave, deptDelete } from '../../api/userMG'
import Pagination from '../../components/Pagination'
import imgurl from './book.png'
export default {
  data() {
    return {
      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      editFormVisible: false, //控制编辑页面显示与隐藏
      imageUrl: '', // 用于存储生成的图片的 URL
      bookTitle: "",// 书名
      title: '添加',
      editDialog: false,
      formInline: {
        page: 1,
        limit: 10,
        Title: "",
        deptName: '',
        deptNo: '',
        createStartTimer: '',
        createEndTimer: '',
      },
      // rules表单验证
      rules: {
        Title: [
          { required: true, message: '请输入标题', trigger: ['blur', 'change'] }
        ],
      },
      LanguageOptions: [
        {
          name: '中文',
          id: 'zhongwen'
        },
        {
          name: '英文',
          id: 'yingwen'
        },
        {
          name: '法语',
          id: 'fayu'
        },
      ],
      CategoryOptions: [
        {
          name: '图书分类号1',
          id: '1'
        },
        {
          name: '图书分类号2',
          id: '2'
        },
        {
          name: '图书分类号3',
          id: '3'
        },
        {
          name: '图书分类号4',
          id: '4'
        },
        {
          name: '图书分类号5',
          id: '5'
        },
      ],
      timer: null,
      editForm: {},
      // 删除部门
      seletedata: {
        ids: '',
        token: localStorage.getItem('logintoken')
      },
      userparm: [], //搜索权限
      listData: [], //用户数据
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10
      },
      addType: false
    }
  },
  // 注册组件
  components: {
    Pagination
  },
  watch: {
    timer(nVal) {
      console.log(nVal, 'nVal')
      if (nVal) {
        this.formInline.createStartTimer = nVal[0]
        this.formInline.createEndTimer = nVal[1]
      } else {
        delete this.formInline.createStartTimer
        delete this.formInline.createEndTimer
      }
    },
    editDialog(newVal) {
      if (!newVal) {
        this.getdata()
        this.addType = false
      }
    },
    deep: true,
  },
  created() {
    this.getdata(this.formInline)
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    // 获取公司列表
    getdata() {
      this.loading = true
      // 模拟数据开始
      let res = {
        code: 0,
        msg: null,
        count: 5,
        data: [
          {
            Code: '1564156',
            Title: "标题标题标题",
            Auther: "作者名称1",
            Publisher: "出版社1",
            PublishDay: "2024-04-18",
            Languageid: "zhongwen",
            Language: "中文",
            Remark: "摘要1",
            Categoryid: "1",
            Category: "图书分类号1",
          },
          {
            Code: '1564156',
            Title: "标题2",
            Auther: "作者名称2",
            Publisher: "出版社2",
            PublishDay: "2024-04-18",
            Languageid: "yingwen",
            Language: "英文",
            Remark: "摘要2",
            Categoryid: "2",
            Category: "图书分类号2",
          }, {
            Code: '1564156',
            Title: "标题3",
            Auther: "作者名称3",
            Publisher: "出版社3",
            PublishDay: "2024-04-18",
            Languageid: "fayu",
            Language: "法语",
            Remark: "摘要3",
            Categoryid: "3",
            Category: "图书分类号3",
          }, {
            Code: '1564156',
            Title: "标题4",
            Auther: "作者名称4",
            Publisher: "出版社4",
            PublishDay: "2024-04-18",
            Languageid: "zhongwen",
            Language: "中文",
            Remark: "摘要4",
            Categoryid: "4",
            Category: "图书分类号4",
          }, {
            Code: '1564156',
            Title: "标题5",
            Auther: "作者名称5",
            Publisher: "出版社5",
            PublishDay: "2024-04-18",
            Languageid: "zhongwen",
            Language: "中文",
            Remark: "摘要5",
            Categoryid: "5",
            Category: "图书分类号5",
          }
        ]
      }
      this.loading = false
      this.listData = res.data
      this.pageparm.currentPage = this.formInline.page
      this.pageparm.pageSize = this.formInline.limit
      this.pageparm.total = res.count
    },
    // 编辑弹框
    editClick(e) {
      console.log(e, 'e')
      this.editForm = e
      this.editDialog = true
      this.bookTitle = e.Title
      this.imgFun()
    },
    // 新增
    AddClick() {
      this.editForm = {}
      this.addType = true
      this.editDialog = true
    },
    // 编辑保存
    EdithandleOk(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //调用接口 传this.editForm
          //接口放置处
          this.editDialog = false
          this.getdata()
          if (this.addType) {
            this.$message.success('新增成功')
            this.imgFun()
          } else {
            this.$message.success('修改成功')
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 编辑取消
    EdithandleNo(e) {
      this.editDialog = false
      this.getdata()
    },
    // 删除
    deleteClick() {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 分页插件事件
    callFather(parm) {
      this.formInline.page = parm.currentPage
      this.formInline.limit = parm.pageSize
      this.getdata(this.formInline)
    },
    // 搜索事件
    search() {
      console.log(this.formInline, 'this.formInline')
      // this.getdata(this.formInline)
    },
    // 重置
    reset() {
      this.formInline.deptName = ''
      this.formInline.deptNo = ''
    },
    // 生产图片
    // 生产图片
    imgFun() {
      // 创建 Canvas 元素
      var canvas = document.createElement('canvas');
      var ctx = canvas.getContext('2d');
      canvas.width = 200;
      canvas.height = 200;
      // 定义目标图像的宽度和高度
      var targetWidth = 200; // 目标宽度
      var targetHeight = 200; // 目标高度
      // 绘制背景图像并调整大小
      var backgroundImage = new Image();
      backgroundImage.onload = function () {
        // 将图像绘制到Canvas，并调整大小
        ctx.drawImage(backgroundImage, 0, 0, backgroundImage.width, backgroundImage.height,
          0, 0, targetWidth, targetHeight);
        // 保存当前绘图状态
        ctx.save();
        // 设置旋转角度（以弧度为单位）
        var angleInRadians = -Math.PI / 10; // 负数表示逆时针旋转
        // 将坐标原点移动到文本绘制位置
        ctx.translate(50, 100); // 根据实际情况调整位置
        // 应用旋转变换
        ctx.rotate(angleInRadians);
        // 设置绘制文字的样式
        var text = this.bookTitle; // 文本内容
        var textWidth = ctx.measureText(text).width; // 测量文本宽度
        // 动态调整字体大小
        var fontSize = 0
        if (textWidth >= 59) {
        fontSize = 18; // 初始字体大小
        
        }else{
        fontSize = 30; // 初始字体大小
        }
        // 设置文本的左侧间距
        var leftPadding = 0;
        // 在 Canvas 上绘制旋转的文本
        ctx.font = 'bold ' + fontSize + 'px Arial';
        ctx.fillStyle = '#fff';
        ctx.fillText(text, leftPadding, 0);
        // 恢复之前保存的绘图状态
        ctx.restore();
        // 将 Canvas 中的内容转换为图片并更新组件的 imageUrl
        this.imageUrl = canvas.toDataURL();
      }.bind(this)
      backgroundImage.src = imgurl;
    }


  }
}
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}

.userRole {
  width: 100%;
}

.add {
  margin: 10PX 0;
}
</style>